<template>
  <view class="container">
    <uni-forms
      ref="formRef"
      label-position="top"
      :model="formData"
      :rules="rules"
      label-width="100vw"
    >
      <view v-for="(item,index) in options" :key="index">
        <slot :name="`before${item.prop}`" :form="formData"></slot>
        <uni-forms-item
          :label="item.label"
          required
          :name="item.prop"
          :rules="[
            {
              required: true,
              errorMessage: '字段为必填项',
            },
          ]"
        >
          <slot :name="item.prop">
            <uni-easyinput
              v-if="
                item.type == 'text' ||
                item.type == 'input' ||
                item.type == 'textarea'
              "
              @change="change(item.prop, $event)"
              type="text"
              v-model="formData[item.prop]"
            />
            <uni-data-select
              v-else-if="item.type == 'select'"
              v-model="formData[item.prop]"
              :localdata="item.optionItems"
              @change="change(item.prop, $event)"
            ></uni-data-select>
            <uni-data-select
              v-else-if="item.type == 'select'"
              v-model="formData[item.prop]"
              :localdata="item.selectOptions"
              @change="change(item.prop, $event)"
            ></uni-data-select>
            <uni-datetime-picker
              v-else-if="item.type == 'datetime'"
              type="datetime"
              v-model="formData[item.prop]"
              @change="change(item.prop, $event)"
            />
            <uni-datetime-picker
              v-else-if="item.type == 'date'"
              type="date"
              v-model="formData[item.prop]"
              @change="change(item.prop, $event)"
            />
          </slot>
        </uni-forms-item>
      </view>
      <slot name="last" :form="formData"></slot>
    </uni-forms>
    <button type="primary" v-if="showButton" @click="submitForm">确 认</button>
  </view>
</template>

<script setup>
import { onMounted, ref, defineProps, defineEmits } from "vue";
import { router } from "@/router/index.js";
const emits = defineEmits(["onChange", "onSubmit"]);

const props = defineProps({
  rules: {
    type: Object,
    default: () => ({}),
  },
  formOption: {
    type: Array,
    default: () => [],
  },
  showButton: {
    type: Boolean,
    default: true,
  },
});
const cancel = () => {
  router.back();
};
const submitForm = async () => {
  const res = await getFormData();
  if (res) {
    emits("onSubmit", { ...keepData.value, ...formData.value });
  } else {
    return false;
  }
};
const options = ref([]);
const formData = ref({});
const keepData = ref({});
function setFormData(data = {}) {
  keepData.value = JSON.parse(JSON.stringify(data));
  formData.value = { ...data };
}
function setOptions(options) {
  options.value = options;
}
const formRef = ref();
async function getFormData() {
  try {
    const res = await formRef.value.validate();
    return res;
  } catch (e) {
    return false;
  }
}
const change = (key, value) => {
  emits("onChange", {
    key,
    value,
  });
};
defineExpose({
  setFormData,
  setOptions,
  getFormData,
});
onMounted(() => {
  options.value = JSON.parse(JSON.stringify(props.formOption));
});
</script>

<style lang="scss" scoped>
page {
  background-color: #fff !important;
}

.container {
  padding: 16px;
}

.footer {
  position: fixed;
  bottom: $uni-spacing-col-lg;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  font-size: $uni-font-size-sm;
}
</style>
